<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { initFetchData, clearCheckLayerMarkerInfo } from './LayerOperationConfirm.module'

const firefightPlotStore = useFirefightPlotStore()
const chemicalStore = useChemicalStore()

const layerOperationConfirmData: any = computed(() => {
  // 图层操作数据
  return firefightPlotStore.layerOperationConfirmData
})
const currentCheckLayerList: any = computed(() => {
  // 当前选中 图层 list
  return firefightPlotStore.currentCheckLayerList
})

const companyInfo: any = computed(() => {
  // 企业相关信息
  return chemicalStore.qyInfo
})

const plotName = ref('')
const { handleLayerManageOperation } = initFetchData(firefightPlotStore, {
  plotName,
  layerOperationConfirmData,
  currentCheckLayerList,
  companyInfo,
})

onMounted(() => {
  if (layerOperationConfirmData.value?.type === 'add') {
    plotName.value = ''
  } else if (layerOperationConfirmData.value?.type === 'edit') {
    plotName.value = currentCheckLayerList.value[0]?.bhtmc
  }
})
</script>
<template>
  <div class="confirm-container">
    <!-- title -->
    <div class="operation-title">
      {{ layerOperationConfirmData.type === 'add' ? '新增标绘图' : '编辑标绘图' }}
    </div>
    <!-- 标绘内容 -->
    <div class="layer-input">
      <span>标绘图名称</span>
      <input v-model="plotName" class="layer-name" type="text" />
    </div>

    <div class="operation-list">
      <button class="operation-button" @click="handleLayerManageOperation('cancel')">
        取&nbsp;&nbsp;&nbsp;消
      </button>
      <button
        style="background: #02979b"
        class="operation-button"
        @click="handleLayerManageOperation('plot')"
      >
        标&nbsp;&nbsp;&nbsp;绘
      </button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.confirm-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 337px;
  height: 193px;
  border: 1px solid #0d609c;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.59) 0%, #00081d 100%);
  font-family: Microsoft YaHei;
  color: #ffffff;
  z-index: 99;
}

.operation-title {
  font-size: 20px;
  font-weight: bold;
  padding: 10px 10px 10px 15px;
  border-bottom: 1px solid #999999;
}

.layer-input {
  font-size: 16px;
  font-weight: 400;
  margin: 16px 0 0 18px;

  .layer-name {
    color: #ffffff;
    width: 210px;
    height: 36px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #999999;
    margin-left: 10px;
    padding-left: 10px;
  }
}

.operation-list {
  @apply flex flex-row justify-around;
  width: 100%;
  margin-top: 44px;

  .operation-button {
    width: 100px;
    height: 26px;
    background: #999999;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #ffffff;
    border: none;
    cursor: pointer;
  }
}
</style>
